<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法3：v-bind属性绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：html插值</h1>
            <h3>可以动态的渲染DOM节点，常用来处理开发者不可预知或难以控制的DOM结构
                注意：在网页上动态渲染html是比较危险的，容易造成漏洞被黑客攻击
            </h3>
            <p v-html="vh"></p >
            <h1>知识点2:v-pre指令</h1>
            <h3>1.它可以使代码所在的节点跳过编译
                2.可以利用它跳过没有指令语法的节点，可以加快速度
            </h3>
            <p>例子</p >
            <p>我的工资是{{price}}元</p >
            <p v-pre>我的工资保密{{price}}元</p >
            <h1>知识点3：v-bind</h1>
            <h3>1.文本插值表达式不能在HTML属性中使用，如果我们需要动态地调整属性，就需要使用v-bind绑定</h3>
            <p>没有使用v-bind</p >
            <p title="titleName">我没有进行属性绑定</p >
            <p>使用v-bind</p >
            <p v-bind:title="titleName">我进行了属性绑定,这样我的属性就可以动态地进行调整了</p >
            <h3>2.v-bind: 可以简写为 ：</h3>
            <p :title="price">我进行了省略，因为我在实际中用的太多了</p >
            <h3>3.除了绑定变量外，还可以绑定表达式、执行函数等，注意最后的结果要符合属性的自身要求</h3>
            <p>例子1: 绑定表达式</p >
            <button :disabled="1+1==9">点击有奖</button>
            <input type="text" placeholder="false?'请输入':'请录入'">
            <p>例子2: 图片的动态绑定</p >
            
            <h3>课堂实例：通过改变type值，实现文本框，单选框和复选框的切换</h3>
            <input type="text">
            <input type="radio">
            <input type="checkbox">
            <p>代码实现</p >
            <input :type="typeName"><br>
            <button @click="typeName='text'">文本框</button>
            <button @click="typeName='radio'">单选框</button>
            <button @click="typeName='checkbox'">复选框</button>
            <h3>课堂小练习：通过动态地改变属性，完成字体大小和颜色的改变，参考上面例子，用按钮实现</h3>
            <span :style="{color:colorName,fontSize: size+'px'}">我是一行等待改变的文字</span><br>
            <button @click="colorName='green'">改成绿色</button>
            <button @click="colorName='pink'">改成粉</button>
            <button @click="colorName='blue'">改成蓝色</button>
            <button @click="colorName='yellow'">改成黄色</button>
            <button @click="size++">字体变大</button>
            <button @click="size--">字体变小1</button>
    </div>
</body>
</html>


<script>
    const connApp = Vue.createApp({
        data() {
            return {
                vh:"<p>我是动态生成的html代码</p >",
                price:10000000,
                titleName:"都说了别碰我，你还碰我！！！！",
                imgSrc:'./两个兄弟.png',
                typeName:'text',
                colorName:'red',
                size:100
            }
        },
    }).mount("#app")
</script>